<template>
    <ion-page>
        <ion-header>
          <ion-toolbar>

          <div class="title">
            <div><ion-col></ion-col></div>
            <span>&nbsp;&nbsp;&nbsp;</span>
            <ion-icon  style="font-size: 20px" aria-hidden="true" :icon="closeSharp"  @click="goToDetail"/>
            <span>&nbsp;&nbsp;&nbsp;</span>NOTICE
            <div><ion-col></ion-col></div>
          </div>
        </ion-toolbar>
        </ion-header>
          <ion-content>
          <ion-card class="text">     
            <ion-card-content>                          
              {{ contentdata.data }}
            </ion-card-content>
        </ion-card>
        </ion-content>        
    </ion-page>
</template>
<script setup>
import { ref,onMounted } from 'vue';
import service1 from '@/api/request';
import { IonPage,IonCol,IonIcon,IonCard,IonCardContent,IonContent,IonToolbar,IonHeader} from '@ionic/vue';
import { useRoute,useRouter } from 'vue-router';
import { closeSharp } from 'ionicons/icons';
const router = useRouter();
const route = useRoute();

const contentdata =ref('')

const fetchData =async () => {
      try {        
      const response = await service1.get('/alertApi/getNcContent',{ params: {id:route.params.id,cls:1}}); 
        contentdata.value = response.data;       
          console.log(response.data);
      } catch (error) {
        // 处理请求错误
        console.error('Error fetching data:',error);
      }
    }  
    onMounted(fetchData);

    const goToDetail = () => {
      router.go(-1);
  };
</script>

<style scoped>
.ion-page{
  --ion-background-color: rgb(152, 150, 150);
}
.text{
  background-color: white;
}
.title{
  background-color: rgb(97, 95, 95);
  color:white;
  font-weight: bold;
}
</style>